<template>
  <div class="site-footer">
    <div class="container">
      <div class="footer-service">
        <ul class="list-service clearfix">
          <li>
            <a href=""
               target="_blank">
              <el-icon>
                <tools />
              </el-icon>
              预约维修服务
            </a>
          </li>
          <li>
            <a href=""
               target="_blank">
              <el-icon>
                <service />
              </el-icon>
              七天无理由退货
            </a>
          </li>
          <li>
            <a href=""
               target="_blank">
              <el-icon>
                <bicycle />
              </el-icon>
              15天免费换货
            </a>
          </li>
          <li>
            <a href=""
               target="_blank">
              <el-icon>
                <van />
              </el-icon>
              满69包邮
            </a>
          </li>
          <li>
            <a href=""
               target="_blank">
              <el-icon>
                <add-location />
              </el-icon>
              520余家售后网店
            </a>
          </li>
        </ul>
      </div>
      <div class="footer-links clearfix">
        <dl class="col-links col-links-first">
          <dt>帮助中心</dt>
          <dd>
            <a rel="nofollow"
               href=""
               target="_blank">账户管理</a>
          </dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">购物指南</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">订单操作</a></dd>
        </dl>
        <dl class="col-links ">
          <dt>服务支持</dt>
          <dd><a rel="nofollow"
               href=""
               target="_blank">售后政策</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">自助服务</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">相关下载</a></dd>
        </dl>
        <dl class="col-links ">
          <dt>线下门店</dt>
          <dd><a rel="nofollow"
               href=""
               target="_blank">小米之家</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">服务网点</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">授权体验店</a></dd>
        </dl>
        <dl class="col-links ">
          <dt>关于小米</dt>
          <dd><a rel="nofollow"
               href=""
               target="_blank">了解小米</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">加入小米</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">投资者关系</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">企业社会责任</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">廉洁举报</a></dd>
        </dl>
        <dl class="col-links ">
          <dt>关注我们</dt>
          <dd><a rel="nofollow"
               href=""
               target="_blank">新浪微博</a></dd>
          <dd><a rel="nofollow"
               href="javascript:void(0);"
               id="J_siteWeixinCode">官方微信</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">联系我们</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">公益基金会</a></dd>
        </dl>
        <dl class="col-links ">
          <dt>特色服务</dt>
          <dd><a rel="nofollow"
               href=""
               target="_blank">F 码通道</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">礼物码</a></dd>
          <dd><a rel="nofollow"
               href=""
               target="_blank">防伪查询</a></dd>
        </dl>
        <div class="col-contact">
          <p class="phone">400-100-5678</p>
          <p>8:00-18:00（仅收市话费）</p>
          <el-button type="success"
                     size="medium"
                     icon="el-icon-chat-dot-square">人工客服</el-button>
          <div class="follow">关注小米：<a href=""
               target="_blank"
               class="wb"></a><a href="javascript:void(0);"
               id="J_followWx"
               class="wx"></a> <img src="//cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx-img.png"
                 id="J_followWxImg"
                 style="display: none;"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="site-info">
    <div class="container">
      <div class="logo ir">小米官网</div>
      <div class="info-text">
        <p class="sites"><a rel="nofollow"
             href=""
             target="_blank">小米商城</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">MIUI</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">米家</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">米聊</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">多看</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">游戏</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">政企服务</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">小米天猫店</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">小米集团隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">小米公司儿童信息保护规则</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">小米商城隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">小米商城用户协议</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">问题反馈</a> <span class="sep">|</span> <a rel="nofollow"
             href="javascript:void(0);"
             class="J_siteGlobalRegion">Select Location</a></p>
        <p class="sites"><a rel="nofollow"
             href=""
             target="_blank">北京互联网法院法律服务工作站</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">中国消费者协会</a> <span class="sep">|</span> <a rel="nofollow"
             href=""
             target="_blank">北京市消费者协会</a></p>
        <p>
          ©
          <a href="javascript:;"
             target="_blank"
             title="mi.com">mi.com</a> 京ICP证110507号
          <a href=""
             target="_blank"
             rel="nofollow">京ICP备10046444号</a> <a rel="nofollow"
             href=""
             target="_blank">京公网安备11010802020134号</a> <a href=""
             target="_blank">京网文[2020]0276-042号</a> <br> <a href=""
             target="_blank">（京）网械平台备字（2018）第00005号</a> <a href=""
             target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/"
             target="_blank">营业执照</a> <a href=""
             target="_blank">医疗器械质量公告</a> <br> <a href=""
             target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
          <a href=""
             target="_blank">食品经营许可证</a> <br>
          违法和不良信息举报电话：171-5104-4404&nbsp;<a href=""
             target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
        </p>
      </div>
      <div class="info-links"><a rel="nofollow"
           href=""
           target="_blank"><img rel="nofollow"
               src="//i1.mifile.cn/f/i/17/site/truste.png"
               alt="TRUSTe Privacy Certification"></a> <a rel="nofollow"
           href=""
           target="_blank"><img rel="nofollow"
               src="//s01.mifile.cn/i/v-logo-2.png"
               alt="诚信网站"></a> <a id="_xinchacharenzheng_cert_vip_kexinweb"
           rel="nofollow"
           href=""
           target="_blank"><img rel="nofollow"
               src="//xyt.xinchacha.com/img/icon/icon3.png"
               alt="可信网站"></a> <a rel="nofollow"
           href=""
           target="_blank"><img rel="nofollow"
               src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
               alt="诚信经营 放心消费"></a><a rel="nofollow"
           href=""
           class="safe-auth J_safeAuth                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     active"><img rel="nofollow"
               src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
               class="img1"><img rel="nofollow"
               src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/431605eb0154864757b11f6cf905c4c8.png"
               class="img2"></a></div>
    </div>
    <div class="slogan ir">探索黑科技，小米为发烧而生</div>
  </div>
</template>

<script setup>
// import { defineComponent } from 'vue'
// export default defineComponent({
//   name: 'MiFooter'
// })
import { AddLocation, Tools, Service, Van, Bicycle } from '@element-plus/icons'
</script>

<style>
.footer-service {
  padding: 27px 0;
  width: 100%;
  list-style-type: none;
  border-bottom: 1px solid #c0c0c0;
}
.container {
  width: 1226px;
  margin-left: auto;
  margin-right: auto;
}
.footer-service li {
  width: 19.8%;
  height: 25px;
  float: left;
  line-height: 25px;
  text-align: center;
  border-right: 1px solid #c0c0c0;
}
.footer-service li:nth-child(5) {
  border-right: none;
}
.footer-service ul {
  font-size: 16px;
  display: blcok;
  list-style-type: none;
}
.footer-service ul a {
  color: #616161;
  text-decoration: none;
  transition: color 0.2s;
  background-color: rgba(0, 0, 0, 0);
}
.footer-links {
  padding: 40px 0;
}
.footer-links .col-links {
  float: left;
  width: 160px;
  margin: 0;
}
.footer-links .col-links dt {
  margin: -1px 0 26px;
  font-size: 14px;
  line-height: 1.25;
  color: #424242;
}
.footer-links .col-links dd {
  margin: 10px 0 0;
  font-size: 12px;
}
.footer-links .col-links a {
  color: #757575;
  text-decoration: none;
}
.footer-links .col-links a:hover {
  text-decoration: none;
}
.footer-links .col-contact {
  float: right;
  text-align: center;
  width: 251px;
  border-left: 1px solid #e0e0e0;
}
.footer-links .col-contact .phone {
  font-size: 22px;
  line-height: 1;
  color: #ff6700;
}
.footer-links .col-contact p {
  font-size: 12px;
  margin: 0 0 5px 0;
}
.footer-links .col-contact .follow {
  font-size: 12px;
  margin-top: 10px;
}
.site-footer .footer-links .col-contact .follow a {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  margin-top: -3px;
}
.site-footer .footer-links .col-contact .follow .wb {
  background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb.png)
    50% 0 no-repeat;
  background-size: cover;
}
.site-footer .footer-links .col-contact .follow .wx {
  background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx.png)
    50% 0 no-repeat;
  background-size: cover;
}

.site-info {
  padding: 30px 0;
  font-size: 12px;
  background: #fafafa;
}
.site-info .container {
  position: relative;
}
.site-info .logo {
  width: 56px;
  height: 56px;
  margin-right: 10px;
  background: url(//s02.mifile.cn/assets/static/image/logo-mi2.png) no-repeat;
  background-size: 56px;
  position: absolute;
  top: 0;
  left: 0;
}
.ir {
  display: block;
  text-align: left;
  text-indent: -9999em;
  overflow: hidden;
}
.site-info .info-text {
  color: #b0b0b0;
  padding-left: 67px;
}
.site-info .info-text p {
  margin: 0;
  line-height: 18px;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.site-info .info-text .sites a {
  color: #757575;
}
.site-info .info-text a {
  color: #b0b0b0;
}
.site-info .info-links {
  height: 28px;
  margin: 4px 0 15px;
  padding-left: 67px;
}
.site-info .info-links a {
  display: inline-block;
}
.site-info .info-links img {
  width: auto;
  height: 28px;
  margin-left: 0;
  border: 0;
}
.site-info .slogan {
  clear: both;
  margin: 30px auto 0;
  width: 100%;
  height: 19px;
  background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/slogan2020.png)
    no-repeat center 0;
}
</style>
